<template>
  <div class="container">
    <div class="container-1200">
      <div class="title mg-B20">国家双创示范基地企业数据统计表</div>
      <div>
        <div style="color: red; margin-left: 20px;">审核状态：{{projectExecuteStatusFormate(projectExecuteForm.status)}}</div>
        <div style="color: red; margin-left: 20px;" v-if="projectExecuteForm.memo">驳回说明：{{projectExecuteForm.memo}}</div>
      </div>
      <el-form
        :model="projectExecuteForm"
        :rules="projectExecuteRules"
        ref="projectExecuteForm"
        label-width="0px"
      >
        <el-row class="rowBorder rowTopBorder">
          <el-col :span="4" class="col-flex bg-ccc leftAlign-pd30 request"
            >企业名称</el-col
          >
          <el-col
            :span="20"
            class="col-flex colLeftBorder "
          >
            <el-form-item prop="companyId" class="vali">
              <el-select
                  v-model="projectExecuteForm.companyId"
                  placeholder="请选择企业"
                  @change="changeCompanyId"
                >
                  <el-option
                    v-for="item in companyList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="4" class="col-flex bg-ccc leftAlign-pd30 request"
            >填报人</el-col
          >
          <el-col :span="8" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="tbr" class="vali">
              <el-input v-model="projectExecuteForm.tbr"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc leftAlign-pd30 request"
            >联系方式</el-col
          >
          <el-col :span="8" class="col-flex colLeftBorder ">
            <el-form-item prop="lxfs" class="vali">
              <el-input v-model="projectExecuteForm.lxfs"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="4" class="col-flex bg-ccc leftAlign-pd30 request"
            >项目名称</el-col
          >
          <el-col
            :span="20"
            class="col-flex colLeftBorder  "
          >
            <el-form-item prop="projectId" class="vali">
              <el-select
                  v-model="projectExecuteForm.projectId"
                  placeholder="请选择项目"
                  @focus="focusProjectId"
                >
                  <el-option
                    v-for="item in projectList"
                    :key="item.id"
                    :label="item.projectName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >1、项目总投资金额<span class="col-red"
              >（截止当月的总投资金额）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="ycjyrs" class="vali">
              <el-input v-model="projectExecuteForm.ytz"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">万元</el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >2、支持带动的中小企业数量<span class="col-red"
              >（本年期间，有发生过交易、合作研发、委托代理等关系的中小企业数量）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="dzzxqys" class="vali">
              <el-input v-model="projectExecuteForm.dzzxqys"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">个</el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >3、支持中小企业创新产业种类</el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="zczxqycxzl" class="vali">
              <el-input v-model="projectExecuteForm.zczxqycxzl"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">件</el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >4、预计攻克技术难点数量<span class="col-red"
              >（从项目开始实施至今碰到的技术难点、痛点）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="yjgkjsnd" class="vali">
              <el-input v-model="projectExecuteForm.yjgkjsnd"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">个</el-col>
        </el-row>
        <el-row class="rowBorder leftAlign-pd60 ">
          <div class="content-box ">
            <div class="dot content-title">技术难点简述：</div>
            <div class="content " v-for="item,index in listInfo.jsndjs" >
              <div class="content-laber" style="width: 70px;">难点{{index+1}}：</div>
              <el-input type="textarea" :rows="1" v-model="item.content" ></el-input>
              <el-button type="danger" icon="el-icon-delete" circle size="mini" class="delete" @click="deleteItem('jsndjs',index)" v-if="listInfo.jsndjs.length>1"></el-button>
              </div>
            <div><el-button type="text" @click="addItem('jsndjs')">添加</el-button>（超过请自行点击添加）</div>
          </div>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >5、专项已攻克的技术难点数量<span class="col-red"
              >（根据第4点的填写内容，对应完成的可以纳入该项统计）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="gkjsnd" class="vali">
              <el-input v-model="projectExecuteForm.gkjsnd"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">个</el-col>
        </el-row>
        <el-row class="rowBorder leftAlign-pd60 ">
          <div class="content-box ">
            <div class="dot content-title">攻克情况简述：</div>
            <div class="content " v-for="item,index in listInfo.gkqkjs" >
              <div class="content-laber" style="width: 140px;">难点{{index+1}}攻克情况：</div>
              <el-input type="textarea" :rows="1" v-model="item.content"></el-input>
              <el-button type="danger" icon="el-icon-delete" circle size="mini" class="delete" @click="deleteItem('gkqkjs',index)" v-if="listInfo.gkqkjs.length>1"></el-button>
              </div>
            <div><el-button type="text" @click="addItem('gkqkjs')">添加</el-button>（超过请自行点击添加）</div>
          </div>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >6、共同研制技术标准数量<span class="col-red"
              >（至少需为区域行业内的统一标准，方可纳入计算）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="gtyzjsbzsl" class="vali">
              <el-input v-model="projectExecuteForm.gtyzjsbzsl"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">个</el-col>
        </el-row>
        <el-row class="rowBorder leftAlign-pd60 ">
          <div class="content-box ">
            <div class="dot content-title">技术标准简述：</div>
            <div class="content " v-for="item,index in listInfo.jsbzjs" >
              <div class="content-laber" style="width: 70px;">标准{{index+1}}：</div>
              <el-input type="textarea" :rows="1" v-model="item.content"> </el-input>
              <el-button type="danger" icon="el-icon-delete" circle size="mini" class="delete" @click="deleteItem('jsbzjs',index)" v-if="listInfo.jsbzjs.length>1"></el-button>
              </div>
            <div><el-button type="text" @click="addItem('jsbzjs')">添加</el-button>（超过请自行点击添加）</div>
          </div>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >7、投资中小企业技术成果数量<span class="col-red"
              >（包含技术成果交易及对拥有技术成果的企业进行股权投资的数量之和）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="tzzxqyjscgsl" class="vali">
              <el-input v-model="projectExecuteForm.tzzxqyjscgsl"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">个</el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >8、投资中小企业技术成果金额<span class="col-red"
              >（包含技术成果交易及对拥有技术成果的企业进行股权投资的金额之和）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="tzzxqyjscgje" class="vali">
              <el-input v-model="projectExecuteForm.tzzxqyjscgje"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">个</el-col>
        </el-row>
        <el-row class="rowBorder leftAlign-pd60 ">
          <div class="content-area ">
            <div class="dot content-title">技术成果交易：</div>
            <div class="content" v-for="item,index in listInfo.jscgjy" >
              <div class="content-laber" style="width:220px">技术成果{{index+1}}名称：</div>
              <el-input v-model="item.technologyName" class="line-input"> </el-input>
              <div class="content-laber" style="width:170px">，成交金额：</div>
              <el-input  v-model="item.amount" class="line-input" style="width:200px"> </el-input>
              <div class="content-laber" style="width:100px">亿元</div>
              <el-button type="danger" icon="el-icon-delete" circle size="mini" class="delete" @click="deleteItem('jscgjy',index)" v-if="listInfo.jscgjy.length>1"></el-button>
              </div>
            <div><el-button type="text" @click="addItem('jscgjy')">添加</el-button>（超过请自行点击添加）</div>
          
            <div class="dot content-title">企业股权投资：</div>
            <div class="content " v-for="item,index in listInfo.qygqtz" >
              <div class="content-laber" style="width:220px">被投企业{{index+1}}名称：</div>
              <el-input v-model="item.companyName" class="line-input"> </el-input>
              <div class="content-laber" style="width:170px">，成交金额：</div>
              <el-input  v-model="item.amount" class="line-input" style="width:200px"> </el-input>
              <div class="content-laber" style="width:100px">亿元</div>
              <el-button type="danger" icon="el-icon-delete" circle size="mini" class="delete" @click="deleteItem('qygqtz',index)" v-if="listInfo.qygqtz.length>1"></el-button>
              </div>
            <div><el-button type="text" @click="addItem('qygqtz')">添加</el-button>（超过请自行点击添加）</div>
          </div>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="16" class="col-flex bg-ccc leftAlign-pd30 request"
            >9、创造就业机会数量<span class="col-red"
              >（本年度期间正式入职人数+期间实习人数+目前在招聘岗位数）</span
            ></el-col
          >
          <el-col :span="4" class="col-flex colLeftBorder colRightBorder">
            <el-form-item prop="ycjyrs" class="vali">
              <el-input v-model="projectExecuteForm.ycjyrs"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="col-flex bg-ccc">个</el-col>
        </el-row>

        <div class="mg-T20">
          <el-form-item>
            <el-button type="primary" @click="onSave('projectExecuteForm')"
              >保存为草稿</el-button
            >
            <el-button
              type="primary"
              @click="onSaveAndSubmit('projectExecuteForm')"
              >保存并提交</el-button
            >
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import SingleUpload from "@/components/Upload/singleUpload";
import singleFileUpload from "@/components/Upload/singleFileUpload";
import fileUpload from "@/components/Upload/fileUpload";
import { find as companyFind, list as companyList  } from "@/api/company";
import { list as dictList } from "@/api/dict";
import utils from "@/utils/utils.js";
import { validPhone, validPositiveIntAndZero } from "@/utils/validate.js";
import { save as projectSave, find as projectFind, list as projectList, } from "@/api/project";
import { update as projectExecuteUpdate, find as projectExecuteFind } from "@/api/projectExecute";

export default {
  components: { SingleUpload, fileUpload,singleFileUpload },
  name: "projectExecuteEdit",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (utils.isNull(value)) {
        callback(new Error("请输入负责人号码"));
      } else if (!validPhone(value)) {
        callback(new Error("负责人手机号码不正确"));
      } else {
        callback();
      }
    };

    const validateCapital = (rule, value, callback) => {
      console.log('value--',value, typeof(value),utils.isNull(value));
      if (utils.isNull(value)) {
        callback(new Error("请输入大于等于0的数值"));
      } else if (!validPositiveIntAndZero(value)) {
        callback(new Error("必须为大于等于0的数值"));
      } else {
        callback();
      }
    };

    return {
      meta:[],
      projectExecuteForm: {
        projectId: "",
        companyId: "",
        tbr: "",
        lxfs:"",
        ytz: 0, //已投资',
        dzzxqys: 0, //新加｜支持带动的中小企业数量（个）',
        zczxqycxzl: 0, //新加｜支持中小企业创新产业种类（件）',
        yjgkjsnd: 0, //新加｜预计攻克技术难点数量（个）',
        jsndjs: "", //新加｜技术难点简述:难点1：,难点2：
        gkjsnd: 0, //新加｜专项已攻克的技术难点数量（个）',
        gkqkjs: "", //新加｜攻克情况简述:难点1攻克情况：,难点2攻克情况：',
        gtyzjsbzsl: 0, //新加｜共同研制技术标准数量（个）',
        jsbzjs: "", //新加｜技术标准简述:标准1：,标准2
        tzzxqyjscgsl: 0, //新加｜投资中小企业技术成果数量（个）
        tzzxqyjscgje: 0, //新加｜投资中小企业技术成果金额（亿元）
        jscgjy: "", //'新加｜技术成果交易',
        qygqtz: "", //'新加｜企业股权投资',
        ycjyrs: 0, //'已创就业人数|创造就业机会数量',
      },

      listInfo:{
        jsndjs: [
          {content:""}
        ], //新加｜技术难点简述:难点1：,难点2：
        gkqkjs: [
          {content:""}
        ], //新加｜攻克情况简述:难点1攻克情况：,难点2攻克情况：',
        jsbzjs: [
          {content:""}
        ], //新加｜技术标准简述:标准1：,标准2
        jscgjy: [
          {technologyName:"", amount:""}
        ], //'新加｜技术成果交易',
        qygqtz: [
          {companyName:"", amount:""}
        ], //'新加｜企业股权投资',
      },


      projectExecuteRules: {
        projectId: [
          { required: true, message: "请选择项目名称", trigger: "blur" },
        ],
        companyId: [
          { required: true, message: "请选择公司名称", trigger: "blur" },
        ],
        tbr: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        lxfs:[{ validator: validatePhone, trigger: "blur" }],
        ytz: [{ validator: validateCapital, trigger: "blur" }],
        dzzxqys: [{ validator: validateCapital, trigger: "blur" }],
        zczxqycxzl: [{ validator: validateCapital, trigger: "blur" }],
        yjgkjsnd: [{ validator: validateCapital, trigger: "blur" }],
        gkjsnd: [{ validator: validateCapital, trigger: "blur" }],
        gtyzjsbzsl: [{ validator: validateCapital, trigger: "blur" }],
        tzzxqyjscgsl: [{ validator: validateCapital, trigger: "blur" }],
        tzzxqyjscgje: [{ validator: validateCapital, trigger: "blur" }],
        ycjyrs: [{ validator: validateCapital, trigger: "blur" }],
      },

      companyId: "",
      companyInfo: {},
      projectList: [],
      companyList: [],
      projectExecuteStatusDict:[],
      projectExecuteStatusPromise:"",
      getProjectListPromise:"",
      getCompanyListPromise:"",

      path: "",
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.path = route.path
      },
      immediate: true,
    },
  },

  activated(){
    console.log('activated执行了--',);
    if(this.$store.getters.closeAliveName == "projectExecuteEdit"){
      console.log('activated执行了--',this.$store.getters);
      this.projectExecuteId = this.$route.query.projectExecuteId
      this.projectExecuteFind(this.projectExecuteId);
      this.$store.dispatch("user/cleanCloseAliveName")
    }
  },

  created() {
    this.projectExecuteStatusPromise = utils.getDictList("projectExecute_status", (res) => {
      this.projectExecuteStatusDict = res.data;
    });
    // this.getProjectListPromise = this.getProjectList();
    this.getCompanyListPromise = this.getCompanyList()
  },

  mounted() {
    if (this.$route.query) {
      this.projectExecuteForm.companyId = this.companyId = this.$route.query.companyId;
      this.projectExecuteForm.projectId = this.projectId = this.$route.query.projectId;
      this.projectExecuteId = this.$route.query.projectExecuteId;
      this.projectFind(this.projectId);
      Promise.all([this.projectExecuteStatusPromise, this.getCompanyListPromise]).then(res => {
      this.projectExecuteFind(this.projectExecuteId);
    })
    }
  },

  destroyed() {},

  methods: {
    //添加列表项
    addItem(prop){
      let item = {}
      this.listInfo[prop].push(item)
    },

    //移除列表项
    deleteItem(prop, index){
      console.log('prop, index--',prop, index);
      this.listInfo[prop].splice(index, 1)
    },

    removeItem(index) {
      this.meta.splice(index, 1);
    },

    returnUrl(data) {
      console.log("data--", data);
      this.meta.push(data);
    },

    //获取月报信息
    projectExecuteFind(id) {
      let _this = this
      projectExecuteFind(id).then((res) => {
        console.log("获取月报信息--", res);
        if (res.type == "success") {
          this.projectExecuteForm = res.data.projectExecute;
          if (!utils.isNull(_this.listInfo.gkqkjs)) {
            _this.listInfo.gkqkjs = JSON.parse(_this.projectExecuteForm.gkqkjs);
          } 
          if (!utils.isNull(_this.listInfo.jsbzjs)) {
            _this.listInfo.jsbzjs = JSON.parse(_this.projectExecuteForm.jsbzjs);
          } 
          if (!utils.isNull(_this.listInfo.jscgjy)) {
            _this.listInfo.jscgjy = JSON.parse(_this.projectExecuteForm.jscgjy);
          } 
          if (!utils.isNull(_this.listInfo.jsndjs)) {
            _this.listInfo.jsndjs = JSON.parse(_this.projectExecuteForm.jsndjs);
          } 
          if (!utils.isNull(_this.listInfo.qygqtz)) {
            _this.listInfo.qygqtz = JSON.parse(_this.projectExecuteForm.qygqtz);
          } 
          
          this.projectExecuteForm.createDate = utils.dateFormatter(this.projectExecuteForm.createDate)
          this.getProjectList()
        }
      });
    },

    //获取企业列表
    getCompanyList() {
      return companyList().then((res) => {
        console.log("获取企业信息--", res);
        if (res.type == "success") {
          this.companyList = res.data.data;
        }
      });
    },

    //企业选中事件
    changeCompanyId(data){
      console.log('data--',data);
      this.projectExecuteForm.projectId = ""
      this.getProjectList()
    },

    //选择项目的事件触发
    focusProjectId(){
      if(utils.isNull(this.projectExecuteForm.companyId)){
        this.$notify({
          message: '请先选择企业',
          type: 'warning'
        });
      }
    },

    //获取项目列表
    getProjectList() {
      let param = {
        companyId:this.projectExecuteForm.companyId
      }
      return projectList(param).then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          this.projectList = res.data.data;
        }
      });
    },

    //获取项目信息
    projectFind(id){
      projectFind(id).then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          this.projectInfo = res.data.project;
          this.projectExecuteForm.projectName = res.data.project.projectName
        }
      });
    },

    onSaveAndSubmit(formName){
      this.projectExecuteForm.status = 1
      this.onSubmit(formName,()=>{
        this.$message.success("项目运营资料成功提交");
      })
    },

    onSave(formName){
      this.projectExecuteForm.status = 0
      this.onSubmit(formName,()=>{
        this.$message.success("项目运营资料保存成功");
      })
    },

    //表单提交事件
    onSubmit(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (_this.listInfo.gkqkjs.length > 0) {
            _this.projectExecuteForm.gkqkjs = JSON.stringify(_this.listInfo.gkqkjs);
          } 
          if (_this.listInfo.jsbzjs.length > 0) {
            _this.projectExecuteForm.jsbzjs = JSON.stringify(_this.listInfo.jsbzjs);
          } 
          if (_this.listInfo.jscgjy.length > 0) {
            _this.projectExecuteForm.jscgjy = JSON.stringify(_this.listInfo.jscgjy);
          } 
          if (_this.listInfo.jsndjs.length > 0) {
            _this.projectExecuteForm.jsndjs = JSON.stringify(_this.listInfo.jsndjs);
          } 
          if (_this.listInfo.qygqtz.length > 0) {
            _this.projectExecuteForm.qygqtz = JSON.stringify(_this.listInfo.qygqtz);
          } 
          projectExecuteUpdate(this.projectExecuteForm)
            .then((res) => {
              console.log("projectExecuteUpdate--", res);
              if (res.type == "success") {
                this.$message.success("更新月报成功");
                this.$store.dispatch("user/setCloseView", this.path)
                this.$router.push({
                  path: "/projectExecute/list",
                  // query: { companyId: this.companyId,projectId:this.projectId },
                });
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        }
      });
    },


    back(){
      this.$router.go(-1)
    },

    projectExecuteStatusFormate(data) {
      return utils.selectDictLabel(this.projectExecuteStatusDict, "projectExecute_status-"+data);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .vali .el-form-item__content .el-form-item__error {
  top: 5px !important;
  right: 30px !important;
  left: unset !important;
  // left: 80% !important;
}

/deep/ .el-date-editor {
  width: 100%;
}

/deep/ .el-date-editor .el-input__inner {
  padding-right: 0px !important;
}

/deep/ .el-input__inner {
  border: 1px solid #fff !important;
}

.el-select {
  width: 100%;
}
.el-form-item {
  margin: 0;
  width: 100%;
}

// 列表项样式
.content-box {
  width: 100%;

  .content-title {
    line-height: 30px;
  }

  .dot {
    position: relative;
    /* border: black 1px solid; */
  }

  .dot:before {
    content: "";
    display: inline-block;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: -20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .content {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .content-laber {
    width: 60px;
    line-height: 33px;
  }

  .delete {
    margin: auto 10px;
  }
}

.content-area {
  .content-title {
    line-height: 30px;
  }

  .dot {
    position: relative;
    /* border: black 1px solid; */
  }

  .dot:before {
    content: "";
    display: inline-block;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: -20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .line-input {
    border-bottom: black 1px solid;
    // /deep/ .el-input__inner{
    //   border-bottom: black 1px solid !important;
    //   border-radius: 0px;

    // }
  }

  .content {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .content-laber {
    width: 60px;
    line-height: 33px;
  }

  .delete {
    margin: auto 10px;
  }
}
</style>
